header {
    /* 设置高度为 90px */
    height: 90px;
    
    /* 设置背景颜色为白色 */
    background-color: white;
    
    /* 使用 Flexbox 布局 */
    display: flex;
    
    /* 垂直居中对齐子元素 */
    align-items: center;
}
body {
  margin: 0;
  background: #f5f5f5;
  font-family: Microsoft Yahei;
  font-size: 14px;
  /* min-width: 1000px; */
}
.header-QQ{
    width: 1200px;
    margin: auto;
}
 .playlist-header {
           /* 适当的高度，让区域更协调 */
            height: 50px;
            /* 文字水平居中 */
            text-align: center;
            /* 文字垂直居中（通过行高等于高度实现） */
            line-height: 50px;
            /* 文字加粗，增强视觉效果 */
            font-weight: 600;
            /* 合适的字体大小 */
            font-size: 26px;
        }
 .playlist-section {
            margin-bottom: 50px;
        }
main {
            width: 1200px;
            margin: 30px auto;
}
.tags {
            display: flex;
            gap: 20px; /* 标签间距 */
            margin-bottom: 20px;
            flex-wrap: wrap; /* 换行适配小屏幕 */
            justify-content: center;
}
.tag {
            color: #666;
            font-size: 14px;
            cursor: pointer;
            padding: 5px 0;
}
.tag.active {
            color: #31c27c; /* 选中标签颜色 */
            border-bottom: 2px solid #31c27c;
}
.playlist-container {
            display: flex;
            gap: 24px; /* 歌单卡片间距 */
            overflow: hidden;
        }
.playlist-card {
            width: calc(20% - 20px); /* 5个卡片平均分配宽度 */
            background-color: white;
            border-radius: 8px;
            overflow: hidden;
            transition: transform 0.3s; /* 悬停缩放动画 */
}
.playlist-card:hover {
            transform: translateY(-5px); /* 悬停上移效果 */
}
.playlist-img {
            width: 100%;
            aspect-ratio: 1/1; /* 正方形封面 */
            object-fit: cover; /* 图片裁剪适配 */
}
.playlist-playcount {
            font-size: 12px;
            color: #999;
}
.playlist-info {
            padding: 10px;
}
.playlist-name {
            font-size: 14px;
            white-space: nowrap; /* 不换行 */
            overflow: hidden;
            text-overflow: ellipsis; /* 超出显示省略号 */
            margin-bottom: 5px;
}
.new-song-section {
            background-color: rgba(255, 255, 255, 0.508);
            padding: 20px;
            border-radius: 8px;
}
.views{
   border: 1px solid #000;
   text-align: right;
   padding: 3px 5px;
}
.song-list {
            display: grid;
            grid-template-columns: repeat(3, 1fr); /* 3列布局 */
            gap: 20px;
}
.song-item{
    display: flex;
    gap: 10px;
    align-items: center;
    padding: 5px 0; 
}
.song-img {
            width: 50px;
            height: 50px;
            object-fit: cover;
            border-radius: 4px;
}
.song-info {
            flex: 1; /* 占满剩余空间 */
            min-width: 0; /* 解决文字溢出问题 */
}
.song-name {
            font-size: 14px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            margin-bottom: 3px;
}
.song-singer {
            font-size: 12px;
            color: #999;
}
.song-duration {
            font-size: 12px;
            color: #999;
}
.MV-section{
            background-color: white;
            padding: 20px;
            border-radius: 8px;
}
.MV-list{
            display: flex;
            gap: 24px; /* 歌单卡片间距 */
            overflow: hidden;        
}
.MV-card{
            width: calc(20% - 20px); /* 5个卡片平均分配宽度 */
            background-color: white;
            border-radius: 8px;
            overflow: hidden;
            transition: transform 0.3s; /* 悬停缩放动画 */
}
.MV-card:hover{
            transform: translateY(-5px);
}
.MV-img {
    width: 100%;
    aspect-ratio: 2/1; 
    object-fit: cover; /* 图片裁剪适配 */
}
.MV-info{
    padding: 10px;
}
.MV-name{
            font-size: 14px;
            white-space: nowrap; /* 不换行 */
            overflow: hidden;
            text-overflow: ellipsis; /* 超出显示省略号 */
            margin-bottom: 5px;
}
.MV-singer{
            font-size: 12px;
            color: #999;
}
.MV-views{
            font-size: 12px;
            color: #999;
}